<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />   
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
		<link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
		<script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
		
        <script type="text/javascript">
        	var pgMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.photogallery');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			
			var ctCollarTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtCollarType');
			var ctProductFamilyXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtProductFamily');
			var ctMaterialTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtMaterialType');
			var ctPhotoTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtPhotoType');
			var factoryXmlLoader = new xmlLoader('../../servlet/BiFactoryServlet?action=5');
			
			var ctCollarTypeStore;
			var ctProductFamilyStore;
			var ctMaterialTypeStore;
			var ctPhotoTypeStore;
			var factoryStore;
			
			var ctCollarTypeCombo;
			var ctProductFamilyCombo;
			var ctMaterialTypeCombo;
			var ctPhotoTypeCombo;
			var factoryCombo;
			
			Ext.onReady(function(){
                Ext.QuickTips.init();
                
                Ext.form.Field.prototype.msgTarget = 'side';
			
				var idValue = getPrarmeterValue(window.location, 'id');
                var startPage = getPrarmeterValue(window.location, 'startPage');
				
				ctCollarTypeStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'code', 'description']),
					data: ctCollarTypeXmlLoader.getXml()
                });
				ctProductFamilyStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'code', 'description']),
					data: ctProductFamilyXmlLoader.getXml()
                });
				ctMaterialTypeStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'code', 'description']),
					data: ctMaterialTypeXmlLoader.getXml()
                });
				ctPhotoTypeStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'code', 'description']),
					data: ctPhotoTypeXmlLoader.getXml()
                });
				factoryStore = new Ext.data.Store({
	                reader: new Ext.data.XmlReader({
	                    record: 'item',
	                    id: 'id',
	                    totalRecords: 'itemTotal'
	                }, ['id', 'name', 'department', 'ctFactoryType']),
	                data: factoryXmlLoader.getXml()
	            });
				
				ctCollarTypeCombo = new Ext.form.ComboBox({
					fieldLabel: message.get('message.edit.collar'),
					id: 'ctCollarType',
					name: 'ctCollarType',
                    blankText: message.get('message.edit.noblank'),
					editable: false,
				    store: ctCollarTypeStore,
					valueField: 'code',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local'
				});
				
				ctPhotoTypeCombo = new Ext.form.ComboBox({
					fieldLabel: pgMessage.get('ui.photogallery.type'),
					id: 'ctPhotoType',
					name: 'ctPhotoType',
					allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
					editable: false,
				    store: ctPhotoTypeStore,
					valueField: 'code',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local'
				});
				
				ctProductFamilyCombo = new Ext.form.ComboBox({
					fieldLabel: message.get('message.edit.productfamily'),
					id: 'ctProductFamily',
					name: 'ctProductFamily',
					allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
					editable: false,
				    store: ctProductFamilyStore,
					valueField: 'code',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local'
				});
				
				ctMaterialTypeCombo = new Ext.form.ComboBox({
					fieldLabel: message.get('message.edit.materialtype'),
					id: 'ctMaterialType',
					name: 'ctMaterialType',
                    blankText: message.get('message.edit.noblank'),
					editable: false,
				    store: ctMaterialTypeStore,
					valueField: 'code',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local'
				});
				
				factoryCombo = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.factoryname'),
                    id: 'factoryId',
                    name: 'factoryId',
                    tpl: '<tpl for="."><div ext:qtip="{ctFactoryType}" class="x-combo-list-item">{name}&nbsp;&nbsp;--&nbsp;&nbsp;{department}</div></tpl>',
                    valueField: 'id',
                    typeAhead: true,
                    store: factoryStore,
                    displayField: 'name',
                    forceSelection: true,
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local'
                });
				
				var photoGalleryForm = new Ext.FormPanel({
					fileUpload: true,
                    labelAlign: 'left',
					url: '../../servlet/BiPhotoGalleryServlet?action=1',
			        frame:true,
			        title: pgMessage.get('ui.photogallery.edittitle'),
			        bodyStyle:'padding:5px 5px 5px 5px;margin-top: 2px;',
			        width: '100%',
					labelWidth: 105,
					reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'photoName',
                        mapping: 'photoName'
                    }, {
                        name: 'reference',
                        mapping: 'reference'
                    }, {
                        name: 'ctCollarType',
                        mapping: 'ctCollarType'
                    },{
                        name: 'ctPhotoType',
                        mapping: 'ctPhotoType'
                    }, {
                        name: 'ctProductFamily',
                        mapping: 'ctProductFamily'
                    }, {
                        name: 'ctMaterialType',
                        mapping: 'ctMaterialType'
                    },{
                        name: 'jauge',
                        mapping: 'jauge'
                    },{
                        name: 'weight',
                        mapping: 'weight'
                    },{
                        name: 'armure',
                        mapping: 'armure'
                    },{
                        name: 'maintenance',
                        mapping: 'maintenance'
                    },{
                        name: 'pilling',
                        mapping: 'pilling'
                    },{
                        name: 'sizeStability',
                        mapping: 'sizeStability'
                    },{
                        name: 'colorStability',
                        mapping: 'colorStability'
                    },{
                        name: 'swatch',
                        mapping: 'swatch'
                    },{
                        name: 'comment',
                        mapping: 'comment'
                    }, {
                        name: 'factoryId',
                        mapping: 'factoryId'
                    }]),
					 items: [{
		                        id: 'id',
		                        name: 'id',
		                        xtype: 'hidden'
	                    	},{
		                        id: 'photoName',
		                        name: 'photoName',
		                        xtype: 'hidden'
	                    	},{
								layout: 'column',
								items: [{
									columnWidth:.33,
					                layout: 'form',
									items: [ctPhotoTypeCombo,ctMaterialTypeCombo,{
										xtype:'numberfield',
					                    fieldLabel: message.get('message.edit.jauge'),
					                    name: 'jauge',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1	
									},{
										xtype:'textfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.maintenance'),
					                    name: 'maintenance',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1	
									},{
										xtype:'textfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.colorstability'),
					                    name: 'colorStability',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1	
									}]
								},{
									columnWidth:.33,
					                layout: 'form',
									items: [{
										xtype:'textfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.reference'),
					                    name: 'reference',
					                    anchor:'86%',
										allowBlank: false,
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1	
									}, ctProductFamilyCombo,{
										xtype:'numberfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.weight'),
					                    name: 'weight',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1	
									},{
										xtype:'textfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.pilling'),
					                    name: 'pilling',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1	
									},{
										xtype:'textfield',
					                    fieldLabel: message.get('message.edit.swatch'),
					                    name: 'swatch',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1	
									}]
								},{
									columnWidth:.33,
					                layout: 'form',
									items: [factoryCombo, ctCollarTypeCombo, {
										xtype:'textfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.armure'),
					                    name: 'armure',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1	
									},{
										xtype:'textfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.sizestability'),
					                    name: 'sizeStability',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1	
									}, {
										xtype: 'fileuploadfield',
										width: '80%',
							            id: 'photo',
							            emptyText: message.get('message.edit.selectimage'),
							            fieldLabel: message.get('message.edit.photo'),
							            name: 'photo',
							            buttonCfg: {
							                text: '',
							                iconCls: 'uploadIcon'
						            	}
									}]
								}]
	                    	},{
		                        fieldLabel: message.get('message.edit.comment'),
		                        name: 'comment',
		                        xtype: 'textarea',
		                        maxLength: 512,
								width: '90%',
		                        maxLengthText: message.get('message.edit.toolong')
		             }],
					
					 buttons: [{
			            text: message.get('message.edit.save'),
						handler: function(){
                            if (photoGalleryForm.getForm().isValid()) {
								
								document.getElementsByName('ctCollarType')[0].value = ctCollarTypeCombo.getValue();
								document.getElementsByName('ctPhotoType')[0].value = ctPhotoTypeCombo.getValue();
								document.getElementsByName('ctProductFamily')[0].value = ctProductFamilyCombo.getValue();
								document.getElementsByName('ctMaterialType')[0].value = ctMaterialTypeCombo.getValue();
								document.getElementsByName('factoryId')[0].value = factoryCombo.getValue();
								
                                photoGalleryForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
										document.getElementById('photo-file').value = null;
                                        photoGalleryForm.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
			        },{
						text: message.get('message.edit.reset'),
						handler: function(){
							photoGalleryForm.getForm().reset();
						}
					},{
			            text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'photo_gallery_list.html?startPage=' + startPage;
                            }else {
                                window.location = 'photo_gallery_list.html';
                            }
                        }
			        }]
				})
			
				photoGalleryForm.render('photoGallery');
				new Ext.Resizable('customImg', {
		            wrap:true,
		            pinned:true,
					dynamic:true,
				    handles: 'all',
				    draggable:true
				});
				
				if (idValue != null) {
					document.getElementById('id').value = idValue;
					photoGalleryForm.getForm().load({
							url:'../../servlet/BiPhotoGalleryServlet?action=3&id=' + idValue, 
							waitMsg:Ext.LoadMask.prototype.msg, 
							success: function(form, action){
								document.getElementById('customImg').src =  '../../_temp/' + document.getElementById('photoName').value;
							}
					});
				}
			
			});
		</script>
</head>
<body>
	<div id="photoGallery"></div>
	<img id="customImg" src="../../_temp/noimage.gif" style="position:absolute;left: 40%;width: 250px;"/>
</body>
</html>